<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>003_dom增删改练习.html</title>
    <style type="text/css">

        table, div.centent {
            margin-top: 50px;
            margin-left: 500px;
        }
        td, th{
            border: 1px solid blue;
        }
    </style>
</head>
<body>
    <div>
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Salary</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="tbady">
                <tr>
                    <td>轩辕冰烆</td>
                    <td>xuanyuanbingheng@163.com</td>
                    <td>3500.00</td>
                    <td><a href="javascript:;">delete</a></td>
                </tr>
                <tr>
                    <td>冰烆</td>
                    <td>xuanyuanbingheng@163.com</td>
                    <td>3500.00</td>
                    <td><a href="javascript:;">delete</a></td>
                </tr>
            </tbody>
        </table>

        <div class="centent">
            <div>
                <span>name: </span><input id="name" type="text" />
            </div>
            <div>
                <span>email: </span><input id="email" type="text" />
            </div>
            <div>
                <span>salary: </span><input id="salary" type="text" />
            </div>

            <div>
                <button id="btn">Submit</button>
            </div>
        </div>
    </div>

<script type="text/javascript">

    // 删除操作
    var allA = document.getElementsByTagName("a");
    for(var i = 0; i < allA.length; i++) {
        allA[i].onclick = function () {
            // 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为，但是此时我们不希望出现默认行为，可以通过在响应函数中的最后renturn false来取消默认行为，也可以在href属性中添加：javascript:;

            var tr = this.parentNode.parentNode; // 根据a标签获取到要删除的tr
            var name = tr.children[0].innerHTML;
            var flog = window.confirm("确定要删除"+name+"么？");
            if(flog) {
                tr.parentNode.removeChild(tr);
            }
        }
    }

    myClick('btn', function () {
        var name = document.getElementById("name").value;
        var email = document.getElementById("email").value;
        var salary = document.getElementById("salary").value;

        var ele = [name, email, salary, '<a href="javascript:;">delete</a>'];
        var tr = document.createElement("tr");
        for(var i = 0; i < ele.length; i++) {
            var td = document.createElement("td");
            td.innerHTML = ele[i];
            tr.appendChild(td);
        }
        var tbady = document.getElementById("tbady");
        tbady.appendChild(tr);

        var a = tr.getElementsByTagName("a")[0];
        a.onclick = delA;

    });


    // 删除操作
    var allA = document.getElementsByTagName("a");
    for(var i = 0; i < allA.length; i++) {
        allA[i].onclick = delA;
    }

    function delA () {
        // 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为，但是此时我们不希望出现默认行为，可以通过在响应函数中的最后renturn false来取消默认行为，也可以在href属性中添加：javascript:;

        var tr = this.parentNode.parentNode; // 根据a标签获取到要删除的tr
        var name = tr.children[0].innerHTML;
        var flog = window.confirm("确定要删除"+name+"么？");
        if(flog) {
            tr.parentNode.removeChild(tr);
        }
    }


    function myClick(id, fun) {
        var id = document.getElementById(id);
        id.onclick = fun;
    }
</script>
</body>
</html>